<template>
    <a-form :model="page" layout="inline">
        <a-form-item field="title" label="名称">
            <a-input v-model="page.title" placeholder="请输入名称" />
        </a-form-item>
        <a-form-item field="tags" label="标签">
            <a-input-tag v-model="page.tags" placeholder="请输入标签" />
        </a-form-item>
        <a-form-item>
            <a-button type="primary" @click="doSubmit">查询</a-button>
        </a-form-item>
    </a-form>
    <a-table
        :columns="columns"
        :data="dataList"
        :pagination="{
            showTotal: true,
            total,
            current: page.current,
            pageSize: page.pageSize,
        }"
        @page-change="pageChange"
    >
        <template #tags="{ record }">
            <a-space wrap>
                <a-tag
                    v-for="(tag, index) of record.tags"
                    :key="index"
                    color="green"
                >
                    {{ tag }}</a-tag
                >
            </a-space>
        </template>
        <template #acceptedRate="{ record }">
            <a-space>
                {{
                    `${
                        record.submitNum
                            ? (record.acceptedNum * 100 / record.submitNum).toFixed(2)
                            : "0"
                    }%(${record.acceptedNum}/${record.submitNum})`
                }}
            </a-space>
        </template>
        <template #createTime="{ record }">
            <a-space>
                {{ moment(record.createTime).format("YYYY-MM-DD") }}
            </a-space>
        </template>
        <template #optional="{ record }">
            <a-space>
                <a-button status="success" @click="toQuestionPage(record)"
                    >做题</a-button
                >
            </a-space>
        </template>
    </a-table>
</template>

<script setup lang="ts">
import { onMounted, ref, watchEffect } from "vue";
import {
    Question,
    QuestionControllerService,
    QuestionQueryRequest,
} from "../../../generated";
import message from "@arco-design/web-vue/es/message";
import { useRouter } from "vue-router";
import moment from "moment";
const router = useRouter();

const show = ref(true);

const dataList = ref([]);
const total = ref(0);
const page = ref<QuestionQueryRequest>({
    title: "",
    tags: [],
    pageSize: 10,
    current: 1,
});
//先执行page.value然后再执行...展开运算符
const pageChange = (num: number) => {
    page.value = {
        ...page.value,
        current: num,
    };
};
const toQuestionPage = (record: Question) => {
    router.push({
        path: `/view/question/${record.id}`,
        params: { id: record.id },
    });
};

const loadData = async () => {
    let res = await QuestionControllerService.listQuestionVoByPageUsingPost(
        page.value
    );
    console.log(res);
    if (res.code === 0) {
        dataList.value = res.data.records;
        total.value = res.data.total;
    } else {
        message.error("加载失败" + res.message);
    }
};
watchEffect(() => {
    loadData();
});
onMounted(() => {
    loadData();
});
const doSubmit = () => {
    loadData();
};
const columns = [
    {
        title: "题号",
        dataIndex: "id",
		sortable: {
			sortDirections: ['ascend', 'descend']
		}
    },
    {
        title: "题目名称",
        dataIndex: "title",
    },
    {
        title: "标签",
        slotName: "tags",
    },
    {
        title: "通过率",
        slotName: "acceptedRate",
    },
    {
        title: "创建时间",
        slotName: "createTime",
    },
    {
        slotName: "optional",
    },
];
</script>

<style scoped>
#manageQuestionView {
}
</style>
